<template>
	<view>
		<uni-popup ref="backReason" :maskClick="false">
			<view class="back_reason-wrap">
				<view class="tit">请输入您的退款原因</view>
				<view class="reason">
					<textarea :style="{color: reason.length?'#333;':'#ccc;'}" class="textarea" v-model="reason" placeholder="请填写您的退款原因" />
				</view>
				<view class="btn" @click="handleSubmit">提交</view>
				<uni-icons @click="hide" class="close-icon" type="close" size="30" color="#ccc"></uni-icons>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				reason: ''
			}
		},
		methods: {
			show() {
				this.$refs.backReason.open()
			},
			hide() {
				this.$refs.backReason.close()
			},
			handleSubmit() {
				this.$emit('confirm', this.reason)
				this.hide()
				this.reason = ''
			}
		}
	}
</script>

<style lang="scss" scoped>
.back_reason-wrap {
	width: 580rpx;
	height:592rpx;
	background-color: #fff;
	border-radius: 20rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	.tit {
		font-size: 32rpx;
		margin: 122rpx 0 40rpx;
		line-height: 1;
		font-weight: 500;
	}
	.reason {
		.textarea {
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 46rpx;
			border-radius: 12rpx;
			border: 1px solid #ebebeb;
			height: 228rpx;
			width: 426rpx;
			color: #ccc;
		}
	}
	.btn {
		width:260rpx;
		height:64rpx;
		line-height: 64rpx;
		text-align: center;
		background:$yellow;
		border-radius:32rpx;
		color: #fff;
		font-size: 28rpx;
		margin-top: 60rpx;
	}
	.close-icon {
		position: absolute;
		top: 24rpx;
		right: 24rpx;
		z-index: 3;
	}
}
</style>
